/**
 * 首页新旧型体占比弹框组件
 */
<script setup>
import { ref, watch, onMounted } from 'vue'
import { useProportionStore } from '@/stores/home'
import http from '@/axios/http'

const proportionStore = useProportionStore()

const year = ref('')
const month = ref('')
const yearList = ref([])
const monthList = ref([])
const tableData = ref([])

watch([year, month], () => {
  getProportionDetail()
})

function getProportionOther() {
  http.post("/home/getProportionOther")
  .then(res => {
    yearList.value = res.data.yearList
    monthList.value = res.data.monthList
  }).catch(err => {
    console.log(err)
  })
}

function getProportionDetail() {
  http.post("/home/getProportionDetail", {
    year: year.value,
    month: month.value
  }).then(res => {
    tableData.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

function beforeOpen() {
  year.value = (new Date()).getFullYear() + ""
  month.value = ((new Date()).getMonth() < 9 ? ("0" + ((new Date()).getMonth() + 1)) : ((new Date()).getMonth() + 1)) + ""

  if (tableData.value.length === 0) {
    getProportionDetail()
  }
}

function afterClose() {
  tableData.value = []
}

onMounted(() => {
  getProportionOther()
  getProportionDetail()
})
</script>

<template>
  <div id="home-proportion-popup">
    <el-dialog
      v-model="proportionStore.isShow"
      title="新旧型体占比"
      top="5vh"
      width="80vw"
      center
      @open="beforeOpen"
      @closed="afterClose"
    >
      <div class="proportion-option">
        <div class="proportion-option-item">
          <span>年份：</span>

          <el-select
            v-model="year"
            size="large"
            placeholder="请选择年份"
            :teleported="false"
          >
            <el-option
              v-for="item in yearList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        
        <div class="proportion-option-item">
          <span>月份：</span>

          <el-select
            v-model="month"
            size="large"
            placeholder="请选择月份"
            :teleported="false"
          >
            <el-option
              v-for="item in monthList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>

      <el-table
        :data="tableData"
        empty-text="暂无数据"
        size="large"
        maxHeight="72vh"
        border
      >
        <el-table-column label="工厂" header-align="center" align="center" fixed>
          <template #default="scope">
            {{ scope.row.brand_no !== null ? (scope.row.brand_no == 'Z.TOTAL' ? '全厂' : scope.row.brand_no) : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="新型体支数" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.new_model !== null ? scope.row.new_model.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="新型体占比" width="90" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">
              {{ scope.row.new_ratio !== null ? Math.round(parseFloat(scope.row.new_ratio)) + '%' : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="新型体产量" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.new_qty !== null ? (scope.row.new_qty > 1000 ? (scope.row.new_qty / 1000).toFixed(1) + 'k' : scope.row.new_qty) : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="新型体产量占比" width="90" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">
              {{ scope.row.new_qty_ratio !== null ? Math.round(parseFloat(scope.row.new_qty_ratio)) + '%' : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="新型体平均订单量" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.new_order !== null ? Math.round(scope.row.new_order).toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="旧型体支数" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.old_model !== null ? scope.row.old_model.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="旧型体占比" width="90" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">
              {{ scope.row.old_ratio !== null ? Math.round(parseFloat(scope.row.old_ratio)) + '%' : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="旧型体产量" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.old_qty !== null ? (scope.row.old_qty > 1000 ? (scope.row.old_qty / 1000).toFixed(1) + 'k' : scope.row.old_qty) : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="旧型体产量占比" width="90" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">
              {{ scope.row.old_qty_ratio !== null ? Math.round(parseFloat(scope.row.old_qty_ratio)) + '%' : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="旧型体平均订单量" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.old_order !== null ? Math.round(scope.row.old_order).toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="总型体支数" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.tot_model !== null ? scope.row.tot_model.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="总型体产量" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.tot_qty !== null ? (scope.row.tot_qty > 1000 ? (scope.row.tot_qty / 1000).toFixed(1) + 'k' : scope.row.tot_qty) : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="总型体平均订单量" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.tot_order !== null ? Math.round(scope.row.tot_order).toLocaleString() : '-' }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#home-proportion-popup {
  --el-color-primary: green;
  --el-bg-color: black;
  --el-text-color-secondary: white;

  &:deep(.el-dialog) {
    border-radius: 2vh;
    box-shadow: 0 0 10px white;
  }

  &:deep(.el-dialog__title) {
    color: white;
    font-size: 2.5vh;
    font-weight: normal;
  }

  &:deep(.el-dialog__close) {
    color: white;
    font-size: 2.5vh;
  }

  .proportion-option {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1%;
    color: white;
    font-size: 2vh;
    font-weight: normal;

    .proportion-option-item {
      &:deep(.el-input__wrapper) {
        background-color: black;
      }

      &:deep(.el-input__inner) {
        color: #ccc;
      }

      &:deep(.el-select__popper.el-popper) {
        background-color: black;
      }

      &:deep(.el-select-dropdown__item) {
        color: white;
        background-color: black;
      }

      &:deep(.el-select-dropdown__item.selected) {
        color: white;
        background-color: green;
      }

      &:deep(.el-select-dropdown__item.hover) {
        color: white;
        background-color: #666;
      }
    }
  }

  .el-table {
    --el-table-bg-color: rgba(0, 0, 0, 0.8);
    --el-table-border-color: rgb(100, 100, 100);
    --el-table-row-hover-bg-color: rgb(50, 50, 50);
    --el-table-tr-bg-color: rgba(0, 0, 0, 0.8);
    --el-table-text-color: white;
  }

  &:deep(.el-table__empty-block) {
    background-color: rgba(0, 0, 0, 0.8);
  }

  &:deep(.el-table--large .cell) {
    padding: 0 5px;
  }
}
</style>